<template>
  <div class="common-layout">
    <el-container>
      <el-aside   width="auto" >
        <div class="nav-title">
          <img src="../assets/logo-text-no-space.png" alt="" />
        </div>
        <el-scrollbar>
          <NavMenuItem></NavMenuItem>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header>
          <HeaderC></HeaderC>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import {
  Document,
  Menu,
  IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

import HeaderC from "../components/Header.vue";
import NavMenuItem from "../components/NavMenuItem";

export default {
    components: {
            Location, Setting, Menu ,Document,IconMenu,
            HeaderC,
            NavMenuItem
       
        },
  setup() {
    const state = reactive({
      count: 0,
      isCollapse:true,//左边折叠菜单是否打开
      activeIndex: '', //激活的菜单
      menuData: [
        {
        
          icon: "el-icon-s-home",
          name: "系统首页",
        },
        {
          url: "",
          icon: "el-icon-menu",
          name: "鲜花管理",
          child: [
            {
              url: "/flowerUp",
              icon: "",
              name: "鲜花上架",
            },
            {
              url: "/flowerDown",
              icon: "",
              name: "鲜花下架",
            },
          ],
        },
        {
          url: "/user",
          icon: "el-icon-setting",
          name: "用户管理"
        },
        {
          url:"/chart",
          icon:"el-icon-pie-chart",
          name:"销售统计"
        }
      ],

    });

   
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };

    return {
      ...toRefs(state),
      handleOpen,
      handleClose,
     
    };
  },
};
</script>

<style lang="scss" scoped>
    @import "@/publicAndBaseCss/public.scss";
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-aside{
    height: 100vh;
    border: 1px solid $main-whitecolor;
    background-color: $main-asidecolor;
    .nav-title {
      height: 8rem;
      background-color: $main-color;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 6rem;
      }
    }
}
.el-header{
    height:10vh;
    background-color: $main-color;
    border: 1px solid $main-whitecolor;
}
.el-main{
    height:80vh;
    width: calc(100vw-200px);
  
}
.el-footer{
    height:10vh;
    background-color: $main-color;
    border: 1px solid $main-whitecolor;
   
}
</style>